<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="system/user/include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="ibox">
                <div class="ibox-title" style="padding-bottom: 0;">
                    <h3 class="text-center">头像修改</h3>
                </div>
                <div class="tab-content">
                    <div class="ggcontainer" id="crop-avatar">
                        <form class="avatar-form" action="/sys/user/uploadImg" enctype="multipart/form-data"
                              method="post">
                            <div class="avatar-body">
                                <div class="avatar-upload">
                                    <input class="avatar-src" name="avatar_src" type="hidden">
                                    <input class="avatar-data" name="avatar_data" type="hidden">
                                    <label for="avatarInput">选取文件</label>
                                    <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                </div>
                                <!-- Crop and preview -->
                                <div class="row">
                                    <div class="col-md-9 col-sm-9">
                                        <div class="avatar-wrapper" style="height:300px;"></div>
                                    </div>
                                    <div class="col-md-3 col-sm-3">
                                        <div class="avatar-preview preview-lg"></div>
                                        <div class="avatar-preview preview-md"></div>
                                        <!--<div class="avatar-preview preview-sm"></div>-->
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9 col-sm-12">
                                        <div class="btn-group">
                                            <button class="btn btn-primary" data-method="rotate" data-option="-90"
                                                    type="button" title="Rotate -90 degrees">左旋转
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="-15"
                                                    type="button">-15°
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="-30"
                                                    type="button">-30°
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="-45"
                                                    type="button">-45°
                                            </button>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-primary" data-method="rotate" data-option="90"
                                                    type="button" title="Rotate 90 degrees">右旋转
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="15"
                                                    type="button">15°
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="30"
                                                    type="button">30°
                                            </button>
                                            <button class="btn btn-primary" data-method="rotate" data-option="45"
                                                    type="button">45°
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <button class="btn btn-primary btn-block avatar-save" type="submit">完成裁剪
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- Loading state -->
                        <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
                        <!--photo_info-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div th:include="system/user/include :: footer"></div>
</body>
</html>
